<div class="p-fluid px-4 py-2 rounded-xl flex flex-col h-[800px]">

  <div class="px-4 mx-2 mb-4 py-3 rounded-lg border border-[var(--border-color)] transition-all">
    <p class="text-[var(--primary-color)] font-semibold mb-1">
      File Organization Preview
    </p>
    <div class="text-sm text-gray-300 space-y-3">
      <p>
        Your files will be automatically renamed and organized based on your library's naming rules.
        Check the preview below to see how your files will look, then click <span class="font-semibold text-green-400">Move Files</span> to organize them.
      </p>
      <p>
        <i class="pi pi-lightbulb text-blue-400 mr-1"></i>
        <span class="text-blue-300">Want to change how files are named? Go to <strong>Settings → File Naming Pattern</strong></span>
      </p>
      <p class="text-yellow-500 font-medium flex items-center gap-2">
        <i class="pi pi-exclamation-triangle text-yellow-400"></i>
        This will actually move and rename files on your computer, make sure you're happy with the preview first!
      </p>
    </div>
  </div>

  <div class="flex gap-4 mb-4 px-2 items-center w-full">
    <div class="flex-1">
      <div class="flex items-center justify-between cursor-pointer" (click)="togglePatternsCollapsed()">
        <p-button
          outlined
          [icon]="patternsCollapsed ? 'pi pi-chevron-right' : 'pi pi-chevron-down'"
          iconPos="right"
          size="small"
          severity="info"
          [label]="patternsCollapsed ? 'Show Naming Rules' : 'Hide Naming Rules'">
        </p-button>
      </div>

      @if (!patternsCollapsed) {
        <div class="space-y-2 mt-2">
          @for (pattern of libraryPatterns; track pattern.libraryId) {
            <div class="p-3 border border-zinc-700 rounded-lg bg-zinc-800">
              <div class="flex justify-between items-start">
                <div class="flex-1">
                  <p class="text-xs text-gray-400 mb-1">Library: {{ pattern.libraryName }}</p>
                  <code class="text-[var(--primary-color)] font-mono text-sm">{{ pattern.pattern || 'No pattern available' }}</code>
                  <p class="text-xs text-gray-400 mt-1">Source: {{ pattern.source }}</p>
                </div>
                <span class="text-xs bg-blue-600 text-white px-2 py-1 rounded ml-2">{{ pattern.bookCount }} book{{ pattern.bookCount > 1 ? 's' : '' }}</span>
              </div>
            </div>
          }
        </div>
      }
    </div>
  </div>

  <div class="flex-grow overflow-y-auto">
    <p-table
      [value]="filePreviews"
      [responsiveLayout]="'scroll'"
      class="block min-w-full"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>ID</th>
          <th>Current Path</th>
          <th></th>
          <th>New Path</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-preview let-i="rowIndex">
        <tr>
          <td class="text-center">{{ preview.bookId }}</td>
          <td class="w-auto">
            <p>
              <span class="text-gray-400 select-none">{{ preview.libraryPathPrefix }}/</span><span class="text-gray-200">{{ preview.relativeOriginalPath }}</span>
            </p>
          </td>
          <td class="w-auto text-[var(--primary-color)] text-center">→</td>
          <td class="w-auto">
            <p>
              <span class="text-gray-400 select-none">{{ preview.libraryPathPrefix }}/</span><span class="text-gray-200">{{ preview.relativeNewPath }}</span>
            </p>
          </td>
          <td class="w-auto text-center">
            @if (preview.isMoved) {
              <i class="pi pi-check-circle text-green-600"></i>
            }
          </td>
        </tr>
      </ng-template>
    </p-table>
  </div>

  <p-divider></p-divider>

  <div class="flex justify-end items-center gap-4 flex-shrink-0 px-4 pt-4">
    @if (movedFileCount > 0) {
      <span class="text-green-500 flex items-center font-semibold drop-shadow-sm select-none">
        {{ movedFileCount }} file{{ movedFileCount > 1 ? 's' : '' }} successfully moved
        <i
          class="pi pi-check-circle ml-2 text-green-500 animate-bounce"
          style="animation-duration: 1.5s;"
          aria-label="Success"
          role="img"
        ></i>
      </span>
    }
    @if (movedFileCount === 0) {
      <p-button
        [label]="loading ? 'Moving...' : 'Move Files'"
        [icon]="loading ? 'pi pi-spin pi-spinner' : 'pi pi-arrows-h'"
        severity="success"
        (click)="saveChanges()"
        [disabled]="loading || filePreviews.length === 0"
      ></p-button>
      <p-button
        label="Cancel"
        icon="pi pi-times"
        severity="danger"
        (click)="cancel()"
      ></p-button>
    } @else {
      <p-button
        label="Close"
        icon="pi pi-times"
        severity="success"
        (click)="cancel()"
      ></p-button>
    }
  </div>
</div>
